<template>
  <div class="headerInfo-wrap">
    <el-row :gutter="10">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <span>Order ID：</span>
          {{data.orderId}}
          <br />
          <span>Model No：</span>
          {{data.productModel}}
          <br />
          <span>Quality：</span>
          {{data.defectiveProductQty}}
          <br />
          <span>Email：</span>
          {{data.emailAddress}}
          <br />
          <span>Defective Product Details：</span>
          {{data.orderDetails}}
          <br />
          <span>claimTime：</span>
          {{data.claimTime | formatDate}}
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <span>Shipping Address:</span>
          <br />
          {{data.receiverName}} {{data.phoneNumber}}
          <br />
          {{data.addressLine1}} {{data.addressLine2}}
          <br />
          {{data.city}} {{data.state}}
          <br />
          {{data.postCode}} {{data.countryCode}}
        </div>
      </el-col>
    </el-row>
    <div class="img-box" v-if="data.photoPath">
      <div
        style="display: inline-block;    background: #000;height: 100px;"
        v-if="RegExp('\.(' + ['avi', 'wmv', 'mkv', 'mp4', 'mov', 'rm', '3gp', 'flv', 'mpg', 'rmvb'].join('|') + ')$', 'i').test(data.photoPath.toLowerCase())"
      >
        <video
          :src="data.photoPath"
          controls="controls"
          autoplay="autoplay"
          width="100"
          height="100"
        ></video>
      </div>
      <el-image
        v-else
        style="width: 100px; height: 100px"
        :src="data.photoPath"
        :preview-src-list="[data.photoPath]"
      ></el-image>
      <el-image
        v-for="item in data.screenshotPath"
        :key="item.key"
        style="width: 100px; height: 100px"
        :src="item"
        :preview-src-list="[item]"
      ></el-image>
    </div>
  </div>
</template>
<script>
import { formatDate } from "assets/js/date";
export default {
  data() {
    return {
      data: {},
    };
  },
  filters: {
    formatDate(time) {
        console.log(time)
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    },
  },
  methods: {
    templateDatas(items) {
      let item = JSON.parse(JSON.stringify(items));
      if (item.screenshotPath) {
        item.screenshotPath = item.screenshotPath.split(",");
      }
      this.data = {};
      this.$nextTick(() => {
        this.data = item;
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.headerInfo-wrap {
  position: relative;
  background-color: rgb(238, 241, 246);
  border: 1px solid #DCDFE6;
  border-left: none;
  border-top: 0;
  padding: 20px;
  min-height: 100px;
  line-height: 22px;

  span {
    font-size: 14px;
    color: #000;
    font-weight: bold;
  }

  .img-box {
    position: absolute;
    right: 20px;
    top: 20px;

    .img {
      position: relative;
      display: inline-block;

      .hide {
        display: none;
      }

      &:hover {
        .hide {
          display: block;
          position: absolute;
          right: 100px;
          top: 0;
          width: auto;
          height: 550px;
          z-index: 9;
        }
      }
    }

    img {
      position: relative;
      width: 100px;
      height: 100px;
      cursor: pointer;
    }
  }
}

.el-image {
  margin-left: 5px;
}
</style>
